<template>
  <div>
    <el-dialog title="事件详情" :visible.sync="isShow" width="1000px">
      <el-table
        :data="
          allEventInformation.slice(
            (currentPage - 1) * PageSize,
            currentPage * PageSize
          )
        "
        border
      >
        <!-- 事件编号 -->
        <el-table-column
          property="AttValue[0]"
          label="事件编号"
          sortable
        ></el-table-column>
        <!-- 事件类型 -->
        <el-table-column
          property="AttValue[1]"
          label="事件类型"
        ></el-table-column>
        <!-- 事件等级 -->
        <el-table-column
          property="AttValue[2]"
          label="事件等级"
        ></el-table-column>
        <!-- 发生时间 -->
        <el-table-column
          property="AttValue[3]"
          label="发生时间"
          width="150px"
          sortable
        ></el-table-column>
        <!-- 发生地点 -->
        <el-table-column
          property="AttValue[4]"
          label="发生地点"
          width="140px"
        ></el-table-column>
        <!-- 车牌号 -->
        <el-table-column
          property="AttValue[5]"
          label="车牌号"
        ></el-table-column>
        <!-- 驾驶员 -->
        <el-table-column
          property="AttValue[6]"
          label="驾驶员"
        ></el-table-column>
        <!-- 处理状态-已处理/未处理 -->
        <el-table-column label="处理状态">
          <template slot-scope="scope">
            <div>{{ scope.row.AttValue[7] | handleState }}</div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column property="" label="操作" width="130px">
          <template v-slot="allEventInformation">
            <el-button
              type="primary"
              icon="el-icon-edit-outline"
              circle
              @click="modifyingEventDetails(allEventInformation.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteEvents(allEventInformation.row.FID)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="footer">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="PageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="allEventInformation.length"
          >
          </el-pagination>
        </div>
        <div id="echartBtn">
          <el-button
            type="success"
            size="medium"
            round
            @click="generateStatisticalTables"
            >生成统计图</el-button
          >
        </div>
      </div>
      <!-- 编辑按钮页面 -->
      <el-dialog
        title="修改事件"
        :visible.sync="show"
        width="55%"
        :modal="false"
      >
        <div id="formElements">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="事件类型">
              <el-select v-model="form.region" placeholder="请选择事件类型">
                <el-option label="碰撞" value="碰撞"></el-option>
                <el-option label="刮碰" value="刮碰"></el-option>
                <el-option label="失火" value="失火"></el-option>
                <el-option label="追尾" value="追尾"></el-option>

                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事发地点">
              <el-input v-model="form.place"></el-input>
            </el-form-item>
            <el-form-item label="驾驶员">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="车牌号">
              <el-input v-model="form.card"></el-input>
            </el-form-item>
            <el-form-item label="处理状态">
              <el-switch
                v-model="form.stats"
                @click.native="changeProcessingState"
              ></el-switch>
              <span> {{ form.processingState }} </span>
            </el-form-item>

            <el-form-item label="事发时间">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.date1"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="form.date2"
                  style="width: 100%"
                ></el-time-picker>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="changeEventState"
                >立即修改</el-button
              >
              <el-button @click="close">取消</el-button>
            </el-form-item>
          </el-form>
        </div></el-dialog
      >
    </el-dialog>

    <!-- 统计图 -->
    <el-dialog
      id="tongjitu"
      title="统计图"
      class="eChart"
      :visible.sync="statisticalFigureVisible"
    >
      <div id="title">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            选择统计图<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleVisible1"
              >事件类型</el-dropdown-item
            >
            <el-dropdown-item @click.native="handleVisible2"
              >发生时间</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div
        v-show="pieVisible"
        id="Pie"
        ref="pieChart"
        style="width: 500px; height: 400px"
      ></div>
      <div
        v-show="barVisible"
        id="Line"
        ref="barGraph"
        style="width: 500px; height: 400px"
      ></div>
    </el-dialog>
  </div>
</template>

<script>
// import eChart from './echart.vue'
import * as echarts from 'echarts'
export default {
  props: {
    dialogFormVisible3: '',
  },
  // components: { eChart },
  data() {
    return {
      statisticalFigureVisible: false,
      show: false,
      pieVisible: false,
      barVisible: false,
      allEventInformation: [],
      FID: '',
      collisionCount: '',
      scratchesCount: '',
      fireCount: '',
      rolloverCount: '',
      otherCount: '',
      monthCount: [],
      form: {
        eventNumber: '',
        region: '',
        place: '',
        name: '',
        card: '',
        stats: false,
        type: [],
        date1: '',
        date2: '',
        processingState: '未处理',
      },
      // 分页器相关
      currentPage: 1,
      pageSizes: [5, 10, 15, 20],
      PageSize: 5,
    }
  },
  filters: {
    handleState(value) {
      if (value == 0) {
        return '未处理'
      } else {
        return '已处理'
      }
    },
  },
  computed: {
    isShow: {
      get() {
        return this.dialogFormVisible3
      },
      set(val) {
        /* console.log(val); */
        this.$emit('send')
      },
    },
  },
  // 获得所有事件
  created() {
    //创建一个用于查询的矩形
    var geomObj = new Zondy.Object.Rectangle(71.97, 10.5, 138.575, 55.79)
    //1-1设置查询结构
    var queryStruct = new Zondy.Service.QueryFeatureStruct()
    //是否包含几何图形信息
    queryStruct.IncludeGeometry = true
    //是否包含属性信息
    queryStruct.IncludeAttribute = true
    //是否包含图形显示参数
    queryStruct.IncludeWebGraphic = false
    //指定查询规则
    var rule = new Zondy.Service.QueryFeatureRule({
      //是否将要素的可见性计算在内
      EnableDisplayCondition: false,
      //是否完全包含
      MustInside: false,
      //是否仅比较要素的外包矩形
      CompareRectOnly: false,
      //是否相交
      Intersect: true,
    })
    //1-2 设置查询参数where条件
    //实例化查询参数对象
    const queryParam = new Zondy.Service.QueryParameter({
      geometry: geomObj,
      resultFormat: 'json',
      rule: rule,
      struct: queryStruct,
      recordNumber: 100,
    })
    //1-3 调用查询服务器
    const queryService = new Zondy.Service.QueryDocFeature(
      queryParam,
      'guanggu',
      2,
      {
        ip: 'localhost',
        port: 6163,
      }
    )
    var that = this
    queryService.query(querySuccess)
    function querySuccess(result) {
      /* console.log(result.SFEleArray) */
      var arr1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      var arr = result.SFEleArray
      arr.forEach((item) => {
        if (item.AttValue[1] == '碰撞') {
          that.collisionCount++
        }
        if (item.AttValue[1] == '刮擦') {
          that.scratchesCount++
        }
        if (item.AttValue[1] == '失火') {
          that.fireCount++
        }
        if (item.AttValue[1] == '追尾') {
          that.rolloverCount++
        }
        if (item.AttValue[1] == '其他') {
          that.otherCount++
        }
        var month = item.AttValue[3][5] + item.AttValue[3][6]
        /* console.log(month) */
        if (month == '1.') {
          arr1[0]++
        } else if (month == '2.') {
          arr1[1]++
        } else if (month == '3.') {
          arr1[2]++
        } else if (month == '4.') {
          arr1[3]++
        } else if (month == '5.') {
          arr1[4]++
        } else if (month == '6.') {
          arr1[5]++
        } else if (month == '7.') {
          arr1[6]++
        } else if (month == '8.') {
          arr1[7]++
        } else if (month == '9.') {
          arr1[8]++
        } else if (month == '10') {
          arr1[9]++
        } else if (month == '11') {
          arr1[10]++
        } else if (month == '12') {
          arr1[11]++
        }
      })

      that.monthCount = arr1

      that.allEventInformation = result.SFEleArray
    }
  },
  mounted() {},
  updated() {},
  methods: {
    // 把数据发送回父组件
    changeVisible2() {
      this.$emit('send')
    },
    // 操作-编辑按钮
    modifyingEventDetails(value) {
      this.show = true

      this.form.region = value.AttValue[1]
      this.form.place = value.AttValue[4]
      this.form.name = value.AttValue[6]
      this.form.card = value.AttValue[5]
      if (value.AttValue[7] == 0) {
        this.form.stats = false
        this.form.processingState = '未处理'
      } else {
        this.form.stats = true
        this.form.processingState = '已处理'
      }
      this.form.date1 = value.AttValue[3]
      this.form.date2 = value.AttValue[3]
      this.FID = value.FID
      this.form.eventNumber = value.AttValue[0]
    },
    // 操作-删除按钮
    deleteEvents(FID) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          console.log(FID)
          const deleteService = new Zondy.Service.EditDocFeature('guanggu', 2, {
            ip: 'localhost',
            port: 6163,
          })
          deleteService.deletes(FID, window.location.reload())
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 处理状态
    changeProcessingState() {
      console.log(this.form.stats)
      if (this.form.stats == false) {
        this.form.processingState = '未处理'
      } else {
        this.form.processingState = '已处理'
      }
    },
    // 操作-编辑按钮-立即修改，和创建事件一样
    changeEventState() {
      var color = 6
      if (this.form.stats == false) {
        color = 6
      } else {
        color = 90
      }
      var pointInfo = new Zondy.Object.CPointInfo({
        Angle: 0,
        Color: color, //子图的颜色
        Space: 0,
        SymHeight: 5, //点的高度
        SymID: 21,
        SymWidth: 5, //点的宽度
      })
      var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
        InfoType: 1, //点
        PntInfo: pointInfo,
      })

      /* 设置添加点要素的属性信息 */
      var eventLevel = ''
      var processingState = ''
      if (this.form.region == '刮碰' || this.form.region == '其他') {
        eventLevel = 1
      } else if (this.form.region == '碰撞') {
        eventLevel = 2
      } else if (this.form.region == '追尾') {
        eventLevel = 3
      } else if (this.form.region == '失火') {
        eventLevel = 4
      }
      if (this.form.stats == false) {
        processingState = 0
      } else {
        processingState = 1
      }
      var attValue = [
        this.form.eventNumber,
        this.form.region,
        eventLevel,
        this.form.date2.toString(),
        this.form.place,
        this.form.card,
        this.form.name,
        processingState,
      ]
      console.log(attValue)
      var feature = new Zondy.Object.Feature({
        GraphicInfo: webGraphicInfo, //样式信息
        AttValue: attValue, //属性
      })
      feature.setFType(1)
      feature.setFID(this.FID)
      /* 2.5 设置要素集 */
      //创建一个要素数据集
      var featureSet = new Zondy.Object.FeatureSet()
      /* 设置属性结构 */
      var cAttStruct = new Zondy.Object.CAttStruct({
        FldName: [
          '事件编号',
          '事件类型',
          '事件等级',
          '发生时间',
          '发生地点',
          '车牌号',
          '驾驶员',
          '处理状态',
        ], //属性的字段名
        FldNumber: 8, //属性的个数
        FldType: [
          'string',
          'string',
          'int',
          'string',
          'string',
          'string',
          'string',
          'int',
        ], //属性的类型
      })
      featureSet.AttStruct = cAttStruct
      /* 添加要素到要素数据集 */
      featureSet.addFeature(feature)
      /* 2.6 调用编辑服务接口 */
      /*
        创建一个编辑服务类
        第一个参数：服务的名称 第二参数：图层的名称
        */
      var editService = new Zondy.Service.EditDocFeature('guanggu', 2, {
        ip: 'localhost',
        port: '6163', //访问IGServer的端口号, .net为6163,Java为8089
      })
      //执行添加点要素功能
      var that = this
      editService.update(featureSet, onSuccess)
      function onSuccess(data) {
        if (data.succeed) {
          that.$message({
            message: '修改要素成功',
            type: 'success',
          })
          window.location.reload()
        } else {
          alert('修改要素失败')
        }
      }
    },
    // 操作-编辑按钮-取消
    close() {
      this.show = false
    },
    // 分页
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSizeChange(val) {
      // 每页显示数量
      this.PageSize = val
    },
    // 生成统计图按钮
    generateStatisticalTables() {
      let _that = this
      _that.$emit('send')
      _that.statisticalFigureVisible = true
      _that.$nextTick(() => {
        _that.handleVisible1()
        _that.handleVisible2()
      })
    },
    // // 改变视图
    // changeVisible() {
    //   this.statisticalFigureVisible = false
    // },
    // 饼状图显示，柱状图隐藏
    handleVisible1() {
      let _that = this
      _that.pieVisible = true
      _that.barVisible = false
      // console.log(_that.pieVisible)
      _that.$nextTick(() => {
        // 根据类型创建饼状图
        let pieCharts = echarts.init(_that.$refs.pieChart)
        pieCharts.setOption({
          title: {
            text: '事件类型饼状图',
            left: 'center',
          },
          legend: {
            bottom: '0%',
            left: 'center',
            /* data: ['碰撞', '刮碰', '失火', '追尾', '其他'] */
          },
          //   小工具
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          series: [
            {
              name: '事件类型展示',
              type: 'pie',
              radius: [30, 150],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 5,
              },

              data: [
                // 碰撞
                {
                  value: this.collisionCount,
                  name:
                    '碰撞' +
                    (
                      (this.collisionCount / this.allEventInformation.length) *
                      100
                    ).toFixed(0) +
                    '%',
                },
                // 刮碰
                {
                  value: this.scratchesCount,
                  name:
                    '刮碰' +
                    (
                      (this.scratchesCount / this.allEventInformation.length) *
                      100
                    ).toFixed(0) +
                    '%',
                },
                // 失火
                {
                  value: this.fireCount,
                  name:
                    '失火' +
                    (
                      (this.fireCount / this.allEventInformation.length) *
                      100
                    ).toFixed(0) +
                    '%',
                },
                // 追尾
                {
                  value: this.rolloverCount,
                  name:
                    '追尾' +
                    (
                      (this.rolloverCount / this.allEventInformation.length) *
                      100
                    ).toFixed(0) +
                    '%',
                },
                // 其他
                {
                  value: this.otherCount,
                  name:
                    '其他' +
                    (
                      (this.otherCount / this.allEventInformation.length) *
                      100
                    ).toFixed(0) +
                    '%',
                },
              ],
            },
          ],
        })
      })
    },
    // 柱状图显示，饼状图隐藏
    handleVisible2() {
      let _that = this
      _that.pieVisible = false
      _that.barVisible = true
      // console.log(_that.barVisible)
      // 根据事件创建饼状图
      _that.$nextTick(() => {
        let barGraphs = echarts.init(_that.$refs.barGraph)
        barGraphs.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['bar'] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ['事件月份数量展示', '事件月份数量展示'],
          },
          xAxis: [
            {
              type: 'category',
              data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
              axisPointer: {
                type: 'shadow',
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量',
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
                formatter: '{value}',
              },
            },
            {
              type: 'value',
              name: '数量',
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
                formatter: '{value}',
              },
            },
          ],
          series: [
            {
              name: '事件月份数量展示',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value
                },
              },
              data: this.monthCount,
            },
            {
              name: 'views',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value
                },
              },
              data: this.monthCount,
            },
          ],
        })
      })
    },
  },
}
</script>

<style>
#modifyEvent {
  z-index: 1000;
}
.block {
  width: 830px;
  display: inline-block;
}
#echartBtn {
  margin-top: 20px;
  display: inline-block;
}
/* .eChart {
  width: 600px;
  height: 500px;
  background-color: #fff;
  position: fixed;
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 10px;
} */
.el-dialog {
  width: 600px;
  height: 600px;
  position: relative;
}
#title {
  height: 40px;
  border-bottom: 1px solid #c0c4cc;
}
#pie {
  width: 500px;
  height: 400px;
  margin-left: 40px;
}
#Line {
  width: 500px;
  height: 400px;
  margin-left: 40px;
}
</style>
